<%@ page import="model.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // 安全地检查用户登录状态
    Object userObj = session.getAttribute("user");
    boolean isLoggedIn = false;
    String username = "";
    String avatar = "";

    if (userObj instanceof User) {
        User user = (User) userObj;
        isLoggedIn = true;
        username = user.getUsername();
        avatar = user.getAvatar() != null ? user.getAvatar() : "https://via.placeholder.com/32";
    }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>回声网络 - 首页</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .user-info {
            float: right;
            color: white;
            display: flex;
            align-items: center;
        }
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 顶部导航 -->
            <el-header style="background: #409EFF; color: white; line-height: 60px; margin-bottom: 30px;">
                <span style="font-size: 24px; font-weight: bold;">回声网络</span>
                <div class="user-info">
                    <% if (isLoggedIn) { %>
                        <img class="user-avatar" src="<%= avatar %>" alt="用户头像">
                        <span>欢迎, <%= username %> | </span>
                        <a href="profile" style="color: white; margin-right: 15px;">个人主页</a>
                        <a href="logout" style="color: white;">退出登录</a>
                    <% } else { %>
                        <a href="login" style="color: white; margin-right: 15px;">登录</a>
                        <a href="register.html" style="color: white;">注册</a>
                    <% } %>
                </div>
            </el-header>

            <!-- 主要内容 -->
            <el-main>
                <el-card style="max-width: 600px; margin: 50px auto; text-align: center;">
                    <h1 style="color: #409EFF; margin-bottom: 20px;">回声网络</h1>
                    <p style="color: #666; font-size: 16px; margin-bottom: 30px;">
                        一个深度交流的博客平台<br>
                        让每一个有价值的声音，都能被清晰地听见
                    </p>

                    <div style="margin: 30px 0;">
                        <% if (!isLoggedIn) { %>
                            <el-button type="primary" size="medium" @click="goToRegister">开始使用</el-button>
                            <el-button size="medium" @click="goToLogin">已有账号</el-button>
                        <% } else { %>
                            <el-button type="primary" size="medium" @click="goToArticles">查看文章</el-button>
                            <el-button size="medium" @click="goToPublish">发布文章</el-button>
                            <el-button size="medium" @click="goToProfile">个人主页</el-button>
                        <% } %>
                    </div>
                </el-card>
            </el-main>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                goToRegister() {
                    window.location.href = 'register.html';
                },
                goToLogin() {
                    window.location.href = 'login';  // 修复：指向 LoginServlet
                },
                goToArticles() {
                    window.location.href = 'articleList';
                },
                goToPublish() {
                    window.location.href = 'publish.html';
                },
                goToProfile() {
                    window.location.href = 'profile';
                }
            }
        });

        function logout() {
            if (confirm('确定要注销吗？')) {
                window.location.href = 'logout';
            }
        }
    </script>
</body>
</html>